<script lang="ts">

export default {
    name: 'Person'
}

</script>

<script lang="ts" setup>

import { ref, reactive, watch } from 'vue'

// 检测基本数据类型的响应式对象
// let sum = ref(0)
// function changeSum() {
//     sum.value += 1
// }
// const stopWatch =  watch(sum,(newValues,oldValues)=>{
//     console.log("sum变化了",newValues,oldValues);
//     if(newValues>=10){
//         //这样的话相当于自己结束掉
//         stopWatch()
//     }
// })

// let person = ref({
//     name: "张三",
//     age: 18
// })


// const changeName = () => {
//     person.value.name += "~"
// }
// const changeAge = () => {
//     person.value.age += 1
// }


// const changePerson = () => {
//     person.value = { name: '李四', age: 90 }
// }


// // 这个位置检测的是地址
// watch(person, (newValue, oldValue) => {
//     console.log("person变化了", newValue, oldValue)
// }
// )

let person = reactive({
    name:"張三",
    age:18,
    car:{
        c1:'宝马',
        c2:'奔驰'
    }
})
const changeAge = () => {
    person.age += 1
}



const changeName = () => {
    person.name += "~"
}


const changeCar1 = ()=>{
    person.car.c1 = "小米su7"
}

const changeCar2 = ()=>{
    person.car.c2 = "小米su8"
}


const changeCar = ()=>{
    person.car = {
        c1:"雅迪",
        c2:"小米手机"
    }
}
watch(()=>{return person.name},(newValue ,oldValue)=>{
  console.log("数值进行更新操作",newValue,oldValue);
    
})

</script>
<template>
    <div class="person">
        <h1>修改用户内容</h1>
        <span>名字{{ person.name }}</span>
        <br>
        <span>年龄{{ person.age }}</span>
        <br>
        <span>c1:{{ person.car.c1 }}</span> <br>
        <span>c2:{{ person.car.c2 }}</span> <br>
        <button @click="changeName">按钮一</button>
        <button @click="changeAge">按钮二</button>
        <button @click="changeCar1">按钮三</button>
        <button @click="changeCar2">按钮四</button>
        <button @click="changeCar">修改整个车</button>
    </div>
</template>
<style>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button {
    margin: 0px 5px;
}
</style>